<template>
 <div class="fxorder">
     <!-- <HeaderTop title="分销订单"></HeaderTop> -->

      
        <div v-if="fxOrder&&fxOrder.length"  class="container">
            <group class="container-group">
                <datetime v-model="value1" @on-change="change" class="container-datetime">
                    <div class="container-date">
                        <div class="date year"><p>{{handleDate[0]}}年</p><img src="../../assets/img/zhankai.png" alt=""></div>
                        <div class="date month"><p>{{handleDate[1]}}月</p><img src="../../assets/img/zhankai.png" alt=""></div>
                        <div class="date day"><p>{{handleDate[2]}}日</p><img src="../../assets/img/zhankai.png" alt=""></div>
                    </div>
                </datetime>
            </group>
              <div ref='wrapper'  :style="{ height: wrapperHeight + 'px',overflow:'scroll' }">
                <mt-loadmore v-if="fxOrder&&fxOrder.length"  :style="{ height: wrapperHeight + 'px' }" :top-method="loadTop" :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" :bottom-drop-text="bottomText"  ref="loadmore">
                    <ul :style="{height:'auto',minHeight: wrapperHeight + 'px',marginTop:'10px'}">
                    <li class="container-li" v-show="!date" v-for="(item,index) in fxOrder" :key="index" @click="gotoFXOrderDetail(item.orderId)">
                        <div class="title">订单号：<span>{{item.orderNo}}</span></div>
                        <img class="zhankai" src="../../assets/img/zhankai2.png" alt="">
                    </li>
                    <li class="container-li" v-show="date" v-for="(item,index) in newArr" :key="index" @click="gotoFXOrderDetail(item.orderId)">
                        <div class="title">订单号：<span>{{item.orderNo}}</span></div>
                        <img class="zhankai" src="../../assets/img/zhankai2.png" alt="">
                    </li>
                    <p v-if="allLoaded" class='allloaded'>已加载全部</p>
                    </ul>
                    
               </mt-loadmore>
            </div>
        </div>
       <!-- <div v-else class="nodata">暂无分销订单</div> -->
       <div v-else class='noGoods'> <img class='noGoodsImg' src="../../assets/img/noData.png" alt=""> </div>
 </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import { Datetime, Group } from 'vux'
import {mapState} from 'vuex'
import { Loadmore } from 'mint-ui'
 export default {
    data(){
        return {
            userId:'',
            token:'',
            userinfoId:'',
            num:1,
            size:10,
            allLoaded:false,
            autofill:false,
            bottomText:"上拉加载更多",
            loadMoreConfig:{
                bottomDistance:100,
            },
            // fxOrder:[
            //     {
            //         "id": 1,
            //         "orderId": 9,
            //         "orderNo": "425162010011018122",
            //         "orderSettlementTime": "2000-01-02 04:41:28"
            //     },
            //     {
            //         "id": 2,
            //         "orderId": 12,
            //         "orderNo": "4216201001122222521",
            //         "orderSettlementTime": "2000-01-01 04:41:28"
            //     },
            //     {
            //         "id": 1,
            //         "orderId": 19,
            //         "orderNo": "888546345634513243",
            //         "orderSettlementTime": "2000-01-03 04:41:28"
            //     },
            //     {
            //         "id": 1,
            //         "orderId": 19,
            //         "orderNo": "888546345634513244",
            //         "orderSettlementTime": "2000-01-04 04:41:28"
            //     }
            // ],
            fxOrder:[],
            newArr:[], //根据时间过滤后的分销订单数组
            dateShow:false,
            currentDate: new Date(),
            value1:'选择-选择-选择',
            date:'',
            wrapperHeight:'100%'
        }
    },
    components:{
        // HeaderTop,
        Datetime,
        Group,
        'mt-loadmore':Loadmore
    },
    computed:{
        handleDate(){
            return this.value1.split('-')
        },
        ...mapState(["userInfo"]),
        newArr1(){
            return this.newArr
        },
    },
    created(){
       this.userId = this.userInfo.userInfo.id
       this.token = this.userInfo.token
       this.getFxOrder();
    },
     mounted(){
         if(this.$refs.wrapper){
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - 24 ;
         }
       
    },
    methods:{
        async getFxOrder(){
            console.log('分销订单')
            const result = await this.API.reqPartnerOrder({userId:this.userId,token:this.token,userinfoId:this.userinfoId,num:this.num,size:this.size})
            this.fxOrder = result.retData
        },
         //获取更多数据
        async getListDataPull(){
            console.log('num',this.num)
            let result = await this.API.reqPartnerOrder({userId:this.userId,token:this.token,userinfoId:this.userinfoId,num:this.num,size:this.size})
            console.log(result)
            if(result.retData==''||result.retData==[]||result.retData==null){
                this.isHaveMore(false) //禁止上拉
            }else{
                this.fxOrder = this.fxOrder.concat(result.retData?result.retData:[]);
                this.isHaveMore(true)
            }
        },
        //下拉刷新
        loadTop(){
            let self = this;
            this.num = 1;
            this.allLoaded = false;
            setTimeout(function(){
            self.getFxOrder();
            self.$refs.loadmore.onTopLoaded();
            },1000)
        },
        // 上拉加载
        loadBottom(){
            let self = this;
            self.num ++;
            console.log('loadmore',this.num)
            setTimeout(function(){
                if(this.fxOrder){
                  self.$refs.loadmore.onBottomLoaded();
                }
                self.getListDataPull();
            },1000)
        },
        isHaveMore(isHaveMore){
            this.allLoaded = true; //true是禁止上拉加载
            if(isHaveMore){
              this.allLoaded = false;
            }
        },
        change (value) {
            console.log('change', value)
            this.date = value
            this.newArr = this.fxOrder.filter(item=>{
                console.log('这是value',value)
                const time = item.orderSettlementTime.split(' ')[0]
                console.log('time === value吗？',time === value)
                return time === value
            })
            console.log('newArr',this.newArr)
        },
        onConfirm (val) {
            console.log('on-confirm arg', val)
            console.log('current value', this.value1)
        },
        gotoFXOrderDetail(orderId){
            this.$router.push({path:'/fxorderdetail', query:{id:orderId}})
        }
    }
 }
</script>



<style lang="stylus" rel="stylesheet/stylus">
    .container-group
        .weui-cells
            .vux-datetime
                .container-date
                    width 100%
                    display flex
                    justify-content space-around
                    font-size 15px
                    height 24px
                    line-height 24px
                    .date
                        display flex
                        img
                            height 4px
                            margin-top 10px
                            margin-left 5px
    .mint-loadmore
        .mint-loadmore-content
            .container-li
                display flex
                justify-content space-between
                align-items center
                margin 0 10px
                font-size 15px
                height 60px
                color #333333
                border-bottom .5px solid #e4e4e4
            .allloaded
                height 50px
                line-height 50px
                text-align center
</style>

<style lang="stylus" rel="stylesheet/stylus">
 @import "../../common/stylus/mixins.styl"
 .fxorder
    // margin-top 45px
    width 100%
    height 100%
    background #fff
    padding-bottom 0 !important
    .container
      height 100%
        ul
            height 100%
            overflow-y scroll
    .noGoods
        padding-top 30px
        text-align center
        .noGoodsImg
            width 150px
</style>
